<!-- 我的流程 -->

<template>
  <div class="DetailApproval-MyProcess">
    <el-timeline>
      <el-timeline-item :timestamp="CORE.timeStr(one.createTime)" class="DetailApproval-MyProcess-2">
        <div>{{ one.releaseUserName }}</div>
        <div class="flex">发起审批</div>
      </el-timeline-item>

      <el-timeline-item
        v-for="item in one.approvers"
        :key="item.id"
        :timestamp="CORE.timeStr(item.updateTime)"
        :class="`DetailApproval-MyProcess-${item.reviewStatus}`"
      >
        <div>{{ item.approverUserName }}　( {{ CORE.dict(DICT.AUDIT_STATUS, item.reviewStatus) }} )</div>

        <div v-if="item.opinion" class="flex">
          <span class="flex0">审批意见</span>
          <div>{{ item.opinion }}</div>
        </div>

        <div v-if="item.approverSign" class="flex">
          <span class="flex0">签名</span>
          <ShowPhoto :one="item" bind="approverSign" noLabel noMargin row2 half />
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyProcess',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 获取文本
     */
    getText(item) {
      const {
        approverUserName = '',
        approverUserPhone = '',
        reviewStatus,
        opinion,
      } = item

      const user = `${approverUserName}${approverUserPhone ? ` (${approverUserPhone})` : ''}`
      const audit = reviewStatus === 1 ? '同意' : '拒绝'
      const color = `DetailRepair-RepairRecord-${audit === '同意' ? 'yes' : 'no'}`

      return [
        ['审批人', user],
        ['审批结果', audit, color],
        ['审批意见', opinion],
      ]
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
